<!DOCTYPE html>
<html>
<head>
    <!-- 页面meta -->
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>传智健康</title>
    <meta name="description" content="传智健康">
    <meta name="keywords" content="传智健康">
    <meta content="width=device-width,initial-scale=1.0,maximum-scale=1,user-scalable=no" name="viewport">
    <!-- 引入样式 -->
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <link rel="stylesheet" href="../plugins/elementui/index.css">
    <link rel="stylesheet" href="../plugins/font-awesome/css/font-awesome.min.css">
    <link rel="stylesheet" href="../css/style.css">
    <!-- 引入组件库 -->
    <script type="text/javascript" src="../js/jquery.min.js"></script>
    <script src="../js/vue.js"></script>
    <script src="../plugins/elementui/index.js"></script>
    <script src="../js/axios-0.18.0.js"></script>
    <!--<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=XlUIMSlX8Q05eRr0ISMd0lQ7Xzbjp66U"></script>-->

    <script type="text/javascript"  src="http://api.map.baidu.com/api?v=3.0&ak=SzgYTcpY8xTpLn3K5W7XO7xaIhIypROX"></script>
    <script src="../js/vue.js"></script>
    <script src="../plugins/elementui/index.js"></script>
    <script type="text/javascript" src="../js/jquery.min.js"></script>
    <script src="../js/axios-0.18.0.js"></script>
    <style>
        .avatar-uploader .el-upload {
            border: 1px dashed #d9d9d9;
            border-radius: 6px;
            cursor: pointer;
            position: relative;
            overflow: hidden;
        }

        .avatar-uploader .el-upload:hover {
            border-color: #409EFF;
        }

        .avatar-uploader-icon {
            font-size: 28px;
            color: #8c939d;
            width: 178px;
            height: 178px;
            line-height: 178px;
            text-align: center;
        }

        .avatar {
            width: 178px;
            height: 178px;
            display: block;
        }

        .datatable {
            position: relative;
            box-sizing: border-box;
            -webkit-box-flex: 1;
            width: 100%;
            max-width: 100%;
            font-size: 14px;
            color: rgb(96, 98, 102);
            overflow: hidden;
            flex: 1 1 0%;
        }

        .datatable td, .datatable th {
            padding: 12px 0;
            min-width: 0;
            -webkit-box-sizing: border-box;
            box-sizing: border-box;
            text-overflow: ellipsis;
            vertical-align: middle;
            position: relative;
            text-align: left;
        }

        #mapContainer{
            height: 600px;
        }

        #mapContainer02{
            height: 600px;
        }

        #mapButton{
            position: absolute;
            right:  10px;
            top: 10px;
            z-index: 10;
        }
        #mapButton02{
            position: absolute;
            right:  10px;
            top: 10px;
            z-index: 10;
        }


        #mapInput{
            position: absolute;
            background-color: #dd6161;
            left:16px;
            top:12px;
            z-index:10;
        }


        .BMap_cpyCtrl {
            display:none;
        }
        .anchorBL{
            display:none;
        }
    </style>


</head>
<body>
<div id="app">
    <div class="content-header">
        <h1>体检机构管理<small>体检机构地址管理</small></h1>
        <el-breadcrumb separator-class="el-icon-arrow-right" class="breadcrumb">
            <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>体检机构管理</el-breadcrumb-item>
            <el-breadcrumb-item>体检机构地址管理</el-breadcrumb-item>
        </el-breadcrumb>
    </div>

    <div class="app-container">
        <div class="filter-container">
            <el-input v-model="lastQueryString" type="hidden"></el-input>
            <el-input placeholder="体检机构名/体检地址" clearable  v-model="pagination.queryString" style="width: 200px;" class="filter-item"></el-input>
            <el-button v-if="authority.ADDRESS_QUERY"  @click="findWithPage" class="dalfBut">查询</el-button>
            <el-button v-if="authority.ADDRESS_ADD" type="primary" class="butT" @click="openAddForm">新建</el-button>
        </div>

        <el-table size="small" current-row-key="id" :data="dataList" stripe highlight-current-row>
            <el-table-column type="index" align="center" label="序号"></el-table-column>
            <el-table-column prop="name" label="体检机构名称" align="center"></el-table-column>
            <el-table-column prop="phone" label="联系电话" align="center"></el-table-column>
            <el-table-column prop="location" label="经纬度" align="center"></el-table-column>
            <el-table-column prop="address" label="详细地址" align="center"></el-table-column>
            <el-table-column label="操作" align="center">


                <template slot-scope="scope">
                    <el-button  v-if="authority.ADDRESS_EDIT"  size="mini" type="primary"  @click="prepareUpdate(scope.row)">编辑</el-button>
                    <el-button  v-if="authority.ADDRESS_DELETE"  size="mini" type="danger" @click="deleteAddress(scope.row)">删除</el-button>
                    <!--<el-button size="mini" type="success" @click="checkInfo(scope.row)">查看详情</el-button>-->
                </template>

            </el-table-column>
        </el-table>

        <!--分页组件-->
        <div class="pagination-container">
            <!-- page-size 属性指定当前每页显示的尺寸-->
            <!-- page-sizes 属性绑定一个数组数据 ， 用于指定 page-size 的可选范围-->
            <el-pagination
                    class="pagiantion"
                    @current-change="handleCurrentPageChange"
                    @size-change="handlePageSizeChange"
                    :current-page="pagination.currentPage"
                    :page-size="pagination.pageSize"
                    :page-sizes="pagination.pageSizes"
                    layout="total, sizes , prev, pager, next, jumper"
                    :total="pagination.total">
            </el-pagination>
        </div>

        <!-- 新增标签弹层 -->
        <div class="add-form">
            <el-dialog :close-on-click-modal="flag" title="新增体检机构地址" :visible.sync="addFormVisible" @close="closeAddForm">
                <template>
                    <el-form  v-if="addFormVisible" ref="addForm" :model="formData" :rules="rules" label-position="right" label-width="100px">
                        <el-row>
                            <el-col :span="12">
                                <el-form-item label="体检机构名" prop="name">
                                    <el-input v-model="formData.name" />
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="联系电话" prop="phone">
                                    <el-input v-model="formData.phone" />
                                </el-form-item>
                            </el-col>
                        </el-row>

                        <el-row>
                            <el-col :span="24">
                                <el-form-item label="上传图片" prop="image">
                                    <!-- 文件上传 的属性介绍
                                    action	必选属性，上传的地址
                                    auto-upload	是否在选取文件后立即进行上传
                                    name	上传的文件字段名
                                    show-file-list	是否显示已上传文件列表

                                    on-success	文件上传成功时的钩子
                                    before-upload	上传文件之前的钩子，参数为上传的文件，
                                    若返回 false 或者返回 Promise 且被 reject，则停止上传。

                                    -->
                                    <el-upload
                                            class="avatar-uploader"
                                            action="/address/upload.do"
                                            :auto-upload="autoUpload"
                                            name="imgFile"
                                            :show-file-list="false"
                                            :on-success="uploadSuccess"
                                            :before-upload="beforeUpload">

                                        <img v-if="imageUrl" :src="imageUrl" class="avatar">
                                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>

                                    </el-upload>
                                </el-form-item>
                            </el-col>
                        </el-row>

                        <el-row>
                            <el-col :span="24">
                                <el-form-item label="经纬度" prop="location">
                                    <el-input v-model="formData.location" type="text" readonly></el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="16">
                                <el-form-item label="详细地址" prop="address">
                                    <el-input v-model="formData.address" type="text" readonly></el-input>
                                </el-form-item>
                            </el-col>

                            <el-col :span="1">&nbsp;</el-col>
                            <el-col :span="4">
                                <el-button @click="openMap" type="primary" round icon="el-icon-location-outline">设置定位</el-button>
                            </el-col>

                        </el-row>
                        <el-row>
                            <el-col :span="24" v-if="mapVisible">

                                <!--<div id="mapInput">
                                     <el-input id="searchAddress" v-model="searchAddress"  prefix-icon="el-icon-search" placeholder="请输入搜索地址"  clearable ></el-input>
                                     &lt;!&ndash;&lt;!&ndash;下面这个就是地址搜索结果的显示区域&ndash;&gt;&ndash;&gt;
                                     <div id="searchResultPanel" style="border:1px solid #C0C0C0;width:150px;height:auto; display:none;"></div>
                                 </div>-->

                                <div id="mapButton">
                                    <el-button alt="取消"  type="danger"  @click="cancelMap" icon="el-icon-close" circle></el-button>
                                    <el-button alt="保存" type="primary" @click="confirmMap" icon="el-icon-check" circle></el-button>
                                </div>


                                <!--百度地图容器-->
                                <div id="mapContainer"></div>
                            </el-col>
                        </el-row>

                    </el-form>
                </template>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="closeAddForm">取消</el-button>
                    <el-button type="primary" @click="addAddress">确定</el-button>
                </div>
            </el-dialog>
        </div>

        <!--编辑地址弹层-->
        <div class="add-form">
            <el-dialog :close-on-click-modal="flag" title="更新体检机构地址" :visible.sync="updateFormVisible" @close="closeUpdateForm">
                <template>
                    <el-form  v-if="updateFormVisible" ref="updateForm" :model="formData" :rules="rules" label-position="right" label-width="100px">
                        <el-row>
                            <el-col :span="12">
                                <el-form-item label="体检机构名" prop="name">
                                    <el-input v-model="formData.name" />
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="联系电话" prop="phone">
                                    <el-input v-model="formData.phone" />
                                </el-form-item>
                            </el-col>
                        </el-row>

                        <el-row>
                            <el-col :span="24">
                                <el-form-item label="上传图片" prop="image">
                                    <!-- 文件上传 的属性介绍
                                    action	必选属性，上传的地址
                                    auto-upload	是否在选取文件后立即进行上传
                                    name	上传的文件字段名
                                    show-file-list	是否显示已上传文件列表

                                    on-success	文件上传成功时的钩子
                                    before-upload	上传文件之前的钩子，参数为上传的文件，
                                    若返回 false 或者返回 Promise 且被 reject，则停止上传。

                                    -->
                                    <el-upload
                                            class="avatar-uploader"
                                            action="/address/upload.do"
                                            :auto-upload="autoUpload"
                                            name="imgFile"
                                            :show-file-list="false"
                                            :on-success="uploadSuccess"
                                            :before-upload="beforeUpload">

                                        <img v-if="imageUrl" :src="imageUrl" class="avatar">
                                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                                    </el-upload>
                                </el-form-item>
                            </el-col>
                        </el-row>

                        <el-row>
                            <el-col :span="24">
                                <el-form-item label="经纬度" prop="location">
                                    <el-input v-model="formData.location" type="text" readonly></el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="16">
                                <el-form-item label="详细地址" prop="address">
                                    <el-input v-model="formData.address" type="text" readonly></el-input>
                                </el-form-item>
                            </el-col>

                            <el-col :span="1">&nbsp;</el-col>
                            <el-col :span="4">
                                <el-button @click="openMap02(formData.location)" type="primary" round icon="el-icon-location-outline">设置定位</el-button>
                            </el-col>

                        </el-row>
                        <el-row>
                            <el-col :span="24" v-if="mapVisible">

                                <!-- <div id="mapInput">


                                     <el-input id="searchAddress" v-model="searchAddress"  prefix-icon="el-icon-search" placeholder="请输入搜索地址"  clearable ></el-input>
                                     &lt;!&ndash;&lt;!&ndash;下面这个就是地址搜索结果的显示区域&ndash;&gt;&ndash;&gt;
                                     <div id="searchResultPanel" style="border:1px solid #C0C0C0;width:150px;height:auto; display:none;"></div>
                                 </div>-->

                                <div id="mapButton02">
                                    <el-button alt="取消"  type="danger"  @click="cancelMap" icon="el-icon-close" circle></el-button>
                                    <el-button alt="保存" type="primary" @click="confirmMap" icon="el-icon-check" circle></el-button>
                                </div>


                                <!--百度地图容器-->
                                <div id="mapContainer02"></div>
                            </el-col>
                        </el-row>

                    </el-form>
                </template>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="closeUpdateForm">取消</el-button>
                    <el-button type="primary" @click="updateAddress">确定</el-button>
                </div>
            </el-dialog>
        </div>




        <!--    <div class="add-form">
                <el-dialog title="新增体检机构地址" :visible.sync="updateFormVisible" @close="closeUpdateForm">
                    <template>
                        <el-form  v-if="updateFormVisible" ref="updateForm" :model="formData" :rules="rules" label-position="right" label-width="100px">
                            <el-row>
                                <el-col :span="12">
                                    <el-form-item label="体检机构名" prop="name">
                                        <el-input v-model="formData.name" />
                                    </el-form-item>
                                </el-col>
                                <el-col :span="12">
                                    <el-form-item label="联系电话" prop="phone">
                                        <el-input v-model="formData.phone" />
                                    </el-form-item>
                                </el-col>
                            </el-row>

                            <el-row>
                                <el-col :span="24">
                                    <el-form-item label="上传图片">
                                        &lt;!&ndash; 文件上传 的属性介绍
                                        action	必选属性，上传的地址
                                        auto-upload	是否在选取文件后立即进行上传
                                        name	上传的文件字段名
                                        show-file-list	是否显示已上传文件列表

                                        on-success	文件上传成功时的钩子
                                        before-upload	上传文件之前的钩子，参数为上传的文件，
                                        若返回 false 或者返回 Promise 且被 reject，则停止上传。

                                        &ndash;&gt;
                                        <el-upload
                                                class="avatar-uploader"
                                                action="/address/upload"
                                                :auto-upload="autoUpload"
                                                name="imgFile"
                                                :show-file-list="false"
                                                :on-success="uploadSuccess"
                                                :before-upload="beforeUpload">

                                            <img v-if="imageUrl" :src="imageUrl" class="avatar">
                                            <i v-else class="el-icon-plus avatar-uploader-icon"></i>

                                        </el-upload>
                                    </el-form-item>
                                </el-col>
                            </el-row>

                            <el-row>
                                <el-col :span="24">
                                    <el-form-item label="经纬度">
                                        <el-input v-model="formData.location" type="text" readonly></el-input>
                                    </el-form-item>
                                </el-col>
                            </el-row>
                            <el-row>
                                <el-col :span="16">
                                    <el-form-item label="详细地址">
                                        <el-input v-model="formData.address" type="text" readonly></el-input>
                                    </el-form-item>
                                </el-col>

                                <el-col :span="1">&nbsp;</el-col>
                                <el-col :span="4">
                                    <el-button @click="openMap" type="primary" round icon="el-icon-location-outline">设置定位</el-button>
                                </el-col>

                            </el-row>
                            <el-row>
                                <el-col :span="24" v-if="mapVisible">

                                    <div id="mapInput">


                                        <el-input id="searchAddress" v-model="searchAddress"  prefix-icon="el-icon-search" placeholder="请输入搜索地址"  clearable ></el-input>
                                        &lt;!&ndash;&lt;!&ndash;下面这个就是地址搜索结果的显示区域&ndash;&gt;&ndash;&gt;
                                        <div id="searchResultPanel" style="border:1px solid #C0C0C0;width:150px;height:auto; display:none;"></div>
                                    </div>

                                    <div id="mapButton">
                                        <el-button alt="取消"  type="danger"  @click="cancelMap" icon="el-icon-close" circle></el-button>
                                        <el-button alt="保存" type="primary" @click="confirmMap" icon="el-icon-check" circle></el-button>
                                    </div>


                                    &lt;!&ndash;百度地图容器&ndash;&gt;
                                    <div id="mapContainer"></div>
                                </el-col>
                            </el-row>

                        </el-form>
                    </template>
                    <div slot="footer" class="dialog-footer">
                        <el-button @click="closeUpdateForm">取消</el-button>
                        <el-button type="primary" @click="updateAddress">确定</el-button>
                    </div>
                </el-dialog>
            </div>-->

    </div>




</div>

</body>


<!-- 引入组件库 -->
<script src="../js/common.js"></script>
<script src="../js/orderAddress.js"></script>



</html>